<template>
	<view class="vedioContent">
		<view class="background_img">
			<image :src="vedioData.img" mode="aspectFill"></image>
		</view>
		<view class="help">
				<view class="voice yuan" @click="stopVoice">
					<view class="iconfont " :class="stopVoive?'icon-jingyin':'icon-jingyin1'"></view>
				</view>
				<view class="right yuan">
					<view class="iconfont icon-forward">
						<button type="default" open-type="share">123</button>
					</view>
				</view>
		</view>
		<view class="content">
			<video :muted="ismuted" :src="vedioData.video" objectFit="fill" @touchstart="handleStart"  @touchend="handleEnd">
				
			</video>
		</view>
		<view class="downloadDiv">
			<button class="download" @click="downloadVideo">
				下 载 视 频
			</button>
		</view>
		
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 单条视频数据
				vedioData:{},
				// 静音样式
				stopVoive:true,
				// 静音功能
				ismuted:false,
				// 视频数组
				vedioList:[],
				// 滑动开始数据
				touchX:'',
				touchY:'',
				touchTime:'',
				vedioIndex:''
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'视频播放'
			})
		},
		mounted() {
			this.vedioList = getApp().globalData.vedioList
			this.vedioData = getApp().globalData.vedio
			this.vedioIndex = getApp().globalData.vedioIndex
		},
		methods:{
			stopVoice(){
				this.stopVoive = !this.stopVoive
				this.ismuted = !this.ismuted
			},
			//下载图片
			async downloadVideo(){
				uni.showToast({
					title:"下载中",
					icon:'none'
				})
				let newUrl = ""
				// 拿到图片在小程序中的临时路径
				const res = await uni.downloadFile({
					url:this.vedioData.video
				})
				newUrl = res[1].tempFilePath
				// 将小程序中的临时路径然后下载都本地中
				console.log(newUrl)
				uni.saveImageToPhotosAlbum({
					filePath:newUrl
				})
				.then(res => {
					uni.hideLoading()
					console.log(res)
				})
			},
			handleStart(event){
				this.touchX = event.touches[0].clientX
				this.touchY = event.touches[0].clientY
				this.touchTime = Date.now()
			},
			handleEnd(e){
				let X =  e.changedTouches[0].clientX - this.touchX
				let Y =  e.changedTouches[0].clientY - this.touchY
				let time = Date.now() - this.touchTime
				console.log(X,Y,time)
				if(time > 3000){
					return
				}
				if(Y < 120 && Y > -120){
					return
				}
				// Y<0,向上滑动,xY0,向下滑动
				if(Y  < 0){
					this.vedioIndex =this.vedioIndex -1
					if(this.vedioIndex <0){
						this.vedioIndex = this.vedioList.length -1
					}
				}else{
					this.vedioIndex =this.vedioIndex + 1
					if(this.vedioIndex > this.vedioList.length - 1){
						this.vedioIndex = 0
					}
				}
				this.vedioData = this.vedioList[this.vedioIndex]
			}	
		}
	}
</script>

<style lang="scss" scoped>
.vedioContent{
	position: relative;
	.background_img{
		image{
			height: 100vh;
			width: 100vw;
			z-index: -1;
			filter: blur(15px);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.help{
		width: 100%;
		text-align: right;
		.yuan{
			.iconfont{
				font-size: 60rpx;
				display: inline-block;
				position: relative;
				button{
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
			}
			}
			margin: 20rpx;
			display: inline-block;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,.3);
			color: #fff;
			text-align: center;
			line-height: 100rpx;
		}
		.voice{
			margin-right: 0 !important;
			.iconfont{
				font-size: 50rpx !important;
			}
		}
		.right{
		
		}
	}
	.content{
		margin:0 auto;
		display: flex;
		justify-content: center;
		video{
			width:420rpx;
			height: 800rpx;
		}
		
	}
	.downloadDiv{
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		.download{
			width: 445rpx;
			height: 100rpx;
			border-radius: 60rpx;
			border: 1rpx solid #fff;
			background-color: rgba(0, 0, 0, 0.3);
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			font-size: 42rpx;
			font-weight: 700;

		}
	}
	
	
}
	
</style>
